<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>课程页</title>
  <link rel="stylesheet" href="../CSS/style.css">
  <link rel="stylesheet" href="../CSS/course.css">
</head>
<body>
  <div class="container">
    <!-- 顶部搜索栏 -->
    <div class="container1">
      <div class="search-box">
        <input type="text" placeholder="搜索...">
      </div>
    </div>

    <!-- 导航栏 -->
    <div class="container2">
      <nav>
        <ul>
          <li><a href="../index.html">首页</a></li>
          <li><a href="project.html">项目</a></li>
          <li><a href="course.html">课程</a></li>
          <li><a href="thesis.html">论文</a></li>
          <li><a href="philosophy.html">哲学</a></li>
          <li><a href="competition.html">比赛</a></li>
          <li><a href="interest.html">兴趣</a></li>
          <li><a href="website.html">网站</a></li>
          <li><a href="hotline.html">热线</a></li>
          <li><a href="introduction.html">具体介绍</a></li>
        </ul>
      </nav>
    </div>

    <!-- 完整筛选+排序栏 -->
    <div class="course-filter">
      <!-- 阶段筛选 -->
      <div class="filter-group">
        <label>阶段：</label>
        <select id="stage-filter">
          <option value="all">全部</option>
          <option value="大一上">大一上</option>
          <option value="大一下">大一下</option>
          <option value="大二上">大二上</option>
          <option value="大二下">大二下</option>
          <option value="大三上">大三上</option>
          <option value="大三下">大三下</option>
          <option value="大四上">大四上</option>
          <option value="大四下">大四下</option>
          <option value="额外内容">额外内容</option>
        </select>
      </div>

      <!-- 选修/必修筛选 -->
      <div class="filter-group">
        <label>选修/必修：</label>
        <select id="type-filter">
          <option value="all">全部</option>
          <option value="选修课">选修课</option>
          <option value="必修课">必修课</option>
          <option value="额外">额外</option>
        </select>
      </div>

      <!-- 课程类型筛选 -->
      <div class="filter-group">
        <label>课程类型：</label>
        <select id="course-type-filter">
          <option value="all">全部</option>
          <option value="通识选修课">通识选修课</option>
          <option value="基础教育课">基础教育课</option>
          <option value="专业教育课">专业教育课</option>
          <option value="额外">额外</option>
        </select>
      </div>

      <!-- 常说分类筛选 -->
      <div class="filter-group">
        <label>常说分类：</label>
        <select id="common-category-filter">
          <option value="all">全部</option>
          <option value="思政类">思政类</option>
          <option value="基础理科">基础理科</option>
          <option value="专业课">专业课</option>
          <option value="编程课">编程课</option>
        </select>
      </div>

      <!-- 从大到小排序 -->
      <div class="filter-group">
        <label>从大到小：</label>
        <div class="sort-option" data-sort="desc" data-key="default">默认（字母排序）</div>
        <div class="sort-option" data-sort="desc" data-key="importance">重要程度</div>
        <div class="sort-option" data-sort="desc" data-key="proficiency">熟练时间</div>
        <div class="sort-option" data-sort="desc" data-key="ai">AI可替代程度</div>
        <div class="sort-option" data-sort="desc" data-key="credit">学分</div>
      </div>

      <!-- 从小到大排序 -->
      <div class="filter-group">
        <label>从小到大：</label>
        <div class="sort-option" data-sort="asc" data-key="default">默认（字母排序）</div>
        <div class="sort-option" data-sort="asc" data-key="importance">重要程度</div>
        <div class="sort-option" data-sort="asc" data-key="proficiency">熟练时间</div>
        <div class="sort-option" data-sort="asc" data-key="ai">AI可替代程度</div>
        <div class="sort-option" data-sort="asc" data-key="credit">学分</div>
      </div>
      <button class="edit-filter-btn" id="editCategoryBtn">编辑分类</button>
    </div>

    <!-- 课程卡片容器 -->
<div class="course-cards">
  <!-- 大一上课程 -->
  <div class="course-card" 
       data-stage="大一上" 
       data-type="必修课" 
       data-course-type="基础教育课" 
       data-common-category="基础理科"
       data-importance="4" 
       data-proficiency="60" 
       data-ai="1" 
       data-credit="5"
       data-intro="高等数学是研究变量与函数的基础数学课程，为后续理工科课程提供数学工具。"
       data-mindmap="#" 
       data-related-courses="线性代数, 概率论" 
       data-related-books="《高等数学（同济版）》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>高等数学</h3>
    <p>重要程度：★★★★</p>
    <p>学分：5</p>
    <p>熟练时间：60小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="编程课"
       data-importance="4" 
       data-proficiency="80" 
       data-ai="2" 
       data-credit="4"
       data-intro="Python程序设计是入门级编程课程，学习Python语法与基础应用。"
       data-mindmap="#" 
       data-related-courses="数据结构, C语言" 
       data-related-books="《Python编程：从入门到实践》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>Python程序设计</h3>
    <p>重要程度：★★★★</p>
    <p>学分：4</p>
    <p>熟练时间：80小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一上" 
       data-type="必修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="3" 
       data-proficiency="40" 
       data-ai="1" 
       data-credit="3"
       data-intro="大学英语中级1提升英语听说读写能力，为学术交流打基础。"
       data-mindmap="#" 
       data-related-courses="大学英语中级II" 
       data-related-books="《大学英语综合教程》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>大学英语中级1</h3>
    <p>重要程度：★★★</p>
    <p>学分：3</p>
    <p>熟练时间：40小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一上" 
       data-type="选修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="2" 
       data-proficiency="30" 
       data-ai="1" 
       data-credit="2"
       data-intro="大学语文培养文学素养与写作能力。"
       data-mindmap="#" 
       data-related-courses="中国近代史纲要" 
       data-related-books="《大学语文》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>大学语文</h3>
    <p>重要程度：★★</p>
    <p>学分：2</p>
    <p>熟练时间：30小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一上" 
       data-type="必修课" 
       data-course-type="通识选修课" 
       data-common-category="基础理科"
       data-importance="2" 
       data-proficiency="30" 
       data-ai="1" 
       data-credit="2"
       data-intro="体育1培养运动习惯与身体素质。"
       data-mindmap="#" 
       data-related-courses="体育II" 
       data-related-books="《大学体育教程》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>体育1</h3>
    <p>重要程度：★★</p>
    <p>学分：2</p>
    <p>熟练时间：30小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一上" 
       data-type="必修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="3" 
       data-proficiency="40" 
       data-ai="1" 
       data-credit="2"
       data-intro="军事理论介绍国防与军事基本知识。"
       data-mindmap="#" 
       data-related-courses="军事技能训练" 
       data-related-books="《军事理论教程》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>军事理论</h3>
    <p>重要程度：★★★</p>
    <p>学分：2</p>
    <p>熟练时间：40小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一上" 
       data-type="选修课" 
       data-course-type="专业教育课" 
       data-common-category="基础理科"
       data-importance="3" 
       data-proficiency="50" 
       data-ai="2" 
       data-credit="3"
       data-intro="数理逻辑与集合论是数学与计算机的基础理论课程。"
       data-mindmap="#" 
       data-related-courses="离散数学" 
       data-related-books="《数理逻辑与集合论》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>数理逻辑与集合论</h3>
    <p>重要程度：★★★</p>
    <p>学分：3</p>
    <p>熟练时间：50小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一上" 
       data-type="选修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="2" 
       data-proficiency="30" 
       data-ai="1" 
       data-credit="2"
       data-intro="工程伦理探讨工程领域的道德与责任问题。"
       data-mindmap="#" 
       data-related-courses="思想道德与法治" 
       data-related-books="《工程伦理》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>工程伦理</h3>
    <p>重要程度：★★</p>
    <p>学分：2</p>
    <p>熟练时间：30小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <!-- 大一下课程 -->
  <div class="course-card" 
       data-stage="大一下" 
       data-type="必修课" 
       data-course-type="基础教育课" 
       data-common-category="基础理科"
       data-importance="4" 
       data-proficiency="60" 
       data-ai="1" 
       data-credit="5"
       data-intro="大学物理研究物质的基本运动规律，是理工科核心基础课。"
       data-mindmap="#" 
       data-related-courses="大学物理实验" 
       data-related-books="《大学物理》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>大学物理</h3>
    <p>重要程度：★★★★</p>
    <p>学分：5</p>
    <p>熟练时间：60小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一下" 
       data-type="必修课" 
       data-course-type="基础教育课" 
       data-common-category="基础理科"
       data-importance="4" 
       data-proficiency="60" 
       data-ai="1" 
       data-credit="5"
       data-intro="高等数学II是高等数学的进阶课程，深入学习微积分等内容。"
       data-mindmap="#" 
       data-related-courses="线性代数" 
       data-related-books="《高等数学（同济版）》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>高等数学II</h3>
    <p>重要程度：★★★★</p>
    <p>学分：5</p>
    <p>熟练时间：60小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一下" 
       data-type="必修课" 
       data-course-type="基础教育课" 
       data-common-category="基础理科"
       data-importance="4" 
       data-proficiency="60" 
       data-ai="1" 
       data-credit="4"
       data-intro="线性代数研究向量空间与线性变换，是数学与工程的基础工具。"
       data-mindmap="#" 
       data-related-courses="高等数学" 
       data-related-books="《线性代数及其应用》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>线性代数</h3>
    <p>重要程度：★★★★</p>
    <p>学分：4</p>
    <p>熟练时间：60小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一下" 
       data-type="必修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="3" 
       data-proficiency="40" 
       data-ai="1" 
       data-credit="3"
       data-intro="大学英语中级II进一步提升英语综合能力。"
       data-mindmap="#" 
       data-related-courses="大学英语中级1" 
       data-related-books="《大学英语综合教程》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>大学英语中级II</h3>
    <p>重要程度：★★★</p>
    <p>学分：3</p>
    <p>熟练时间：40小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一下" 
       data-type="选修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="2" 
       data-proficiency="30" 
       data-ai="1" 
       data-credit="2"
       data-intro="心理适应与保健教授心理健康知识与调节方法。"
       data-mindmap="#" 
       data-related-courses="大学生职业生涯规划" 
       data-related-books="《心理适应与健康》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>心理适应与保健</h3>
    <p>重要程度：★★</p>
    <p>学分：2</p>
    <p>熟练时间：30小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一下" 
       data-type="必修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="3" 
       data-proficiency="40" 
       data-ai="1" 
       data-credit="3"
       data-intro="思想道德与法治培养道德修养与法治观念。"
       data-mindmap="#" 
       data-related-courses="中国近代史纲要" 
       data-related-books="《思想道德与法治》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>       
    <h3>思想道德与法治</h3>
    <p>重要程度：★★★</p>
    <p>学分：3</p>
    <p>熟练时间：40小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一下" 
       data-type="选修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="2" 
       data-proficiency="30" 
       data-ai="1" 
       data-credit="2"
       data-intro="摄影课程教授摄影技巧与艺术表达。"
       data-mindmap="#" 
       data-related-courses="数字媒体技术" 
       data-related-books="《摄影入门》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>摄影</h3>
    <p>重要程度：★★</p>
    <p>学分：2</p>
    <p>熟练时间：30小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大一下" 
       data-type="选修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="2" 
       data-proficiency="30" 
       data-ai="1" 
       data-credit="2"
       data-intro="国情分析和商业模型探讨国家发展与商业逻辑。"
       data-mindmap="#" 
       data-related-courses="工程伦理" 
       data-related-books="《国情与商业》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>国情分析和商业模型</h3>
    <p>重要程度：★★</p>
    <p>学分：2</p>
    <p>熟练时间：30小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <!-- 大二上课程 -->
  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="专业课"
       data-importance="4" 
       data-proficiency="70" 
       data-ai="2" 
       data-credit="3"
       data-intro="数字电子技术实验是数字电子技术的实践课程，锻炼动手能力。"
       data-mindmap="#" 
       data-related-courses="数字电子技术" 
       data-related-books="《数字电子技术实验指导》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>数字电子技术实验</h3>
    <p>重要程度：★★★★</p>
    <p>学分：3</p>
    <p>熟练时间：70小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="专业课"
       data-importance="4" 
       data-proficiency="80" 
       data-ai="2" 
       data-credit="4"
       data-intro="数字电子技术研究数字电路与逻辑设计，是电子信息类核心课。"
       data-mindmap="#" 
       data-related-courses="数字电子技术实验" 
       data-related-books="《数字电子技术基础》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>数字电子技术</h3>
    <p>重要程度：★★★★</p>
    <p>学分：4</p>
    <p>熟练时间：80小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="编程课"
       data-importance="4" 
       data-proficiency="80" 
       data-ai="2" 
       data-credit="3"
       data-intro="C语言程序设计实验是C语言的实践课程，强化编程技能。"
       data-mindmap="#" 
       data-related-courses="C语言程序设计" 
       data-related-books="《C语言实验指导》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>C语言程序设计实验</h3>
    <p>重要程度：★★★★</p>
    <p>学分：3</p>
    <p>熟练时间：80小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="专业课"
       data-importance="4" 
       data-proficiency="70" 
       data-ai="2" 
       data-credit="3"
       data-intro="大学物理实验是大学物理的实践环节，培养实验能力。"
       data-mindmap="#" 
       data-related-courses="大学物理" 
       data-related-books="《大学物理实验》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>大学物理实验</h3>
    <p>重要程度：★★★★</p>
    <p>学分：3</p>
    <p>熟练时间：70小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="编程课"
       data-importance="4" 
       data-proficiency="80" 
       data-ai="2" 
       data-credit="3"
       data-intro="数据结构实验是数据结构的实践课程，锻炼算法与数据组织能力。"
       data-mindmap="#" 
       data-related-courses="数据结构" 
       data-related-books="《数据结构实验指导》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>数据结构实验</h3>
    <p>重要程度：★★★★</p>
    <p>学分：3</p>
    <p>熟练时间：80小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="选修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="3" 
       data-proficiency="50" 
       data-ai="1" 
       data-credit="2"
       data-intro="大学生职业生涯规划指导职业发展与规划。"
       data-mindmap="#" 
       data-related-courses="心理适应与保健" 
       data-related-books="《大学生职业生涯规划》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>大学生职业生涯规划</h3>
    <p>重要程度：★★★</p>
    <p>学分：2</p>
    <p>熟练时间：50小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="选修课" 
       data-course-type="专业教育课" 
       data-common-category="基础理科"
       data-importance="3" 
       data-proficiency="60" 
       data-ai="2" 
       data-credit="3"
       data-intro="代数结构与图论研究抽象代数与图的理论，是数学与计算机的基础。"
       data-mindmap="#" 
       data-related-courses="数理逻辑与集合论" 
       data-related-books="《代数结构与图论》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>代数结构与图论</h3>
    <p>重要程度：★★★</p>
    <p>学分：3</p>
    <p>熟练时间：60小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="编程课"
       data-importance="5" 
       data-proficiency="90" 
       data-ai="2" 
       data-credit="4"
       data-intro="数据结构是计算机专业核心课，研究数据的组织与算法设计。"
       data-mindmap="#" 
       data-related-courses="数据结构实验, 算法设计" 
       data-related-books="《数据结构（C语言版）》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>数据结构</h3>
    <p>重要程度：★★★★★</p>
    <p>学分：4</p>
    <p>熟练时间：90小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="通识选修课" 
       data-common-category="思政类"
       data-importance="3" 
       data-proficiency="50" 
       data-ai="1" 
       data-credit="3"
       data-intro="中国近代史纲要学习中国近代历史与发展脉络。"
       data-mindmap="#" 
       data-related-courses="思想道德与法治" 
       data-related-books="《中国近代史纲要》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>中国近代史纲要</h3>
    <p>重要程度：★★★</p>
    <p>学分：3</p>
    <p>熟练时间：50小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="专业教育课" 
       data-common-category="编程课"
       data-importance="4" 
       data-proficiency="80" 
       data-ai="2" 
       data-credit="4"
       data-intro="C++程序设计是面向对象编程的核心课程，扩展编程能力。"
       data-mindmap="#" 
       data-related-courses="C语言程序设计" 
       data-related-books="《C++ Primer》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>C++程序设计</h3>
    <p>重要程度：★★★★</p>
    <p>学分：4</p>
    <p>熟练时间：80小时+</p>
    <p>AI可替代程度：★★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="基础教育课" 
       data-common-category="基础理科"
       data-importance="3" 
       data-proficiency="60" 
       data-ai="1" 
       data-credit="3"
       data-intro="概率论与数理统计研究随机现象与数据统计方法，是数学与工程的基础。"
       data-mindmap="#" 
       data-related-courses="高等数学" 
       data-related-books="《概率论与数理统计》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>概率论与数理统计</h3>
    <p>重要程度：★★★</p>
    <p>学分：3</p>
    <p>熟练时间：60小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>

  <div class="course-card" 
       data-stage="大二上" 
       data-type="必修课" 
       data-course-type="通识选修课" 
       data-common-category="基础理科"
       data-importance="2" 
       data-proficiency="30" 
       data-ai="1" 
       data-credit="2"
       data-intro="体育II（排球）提升排球技能与团队协作能力。"
       data-mindmap="#" 
       data-related-courses="体育1" 
       data-related-books="《大学体育（排球）》" 
       data-related-videos="#">
    <!-- 新增：删除按钮 -->
    <span class="card-delete">×</span>
    <!-- 新增：编辑按钮 -->
    <button class="card-edit">编辑</button>
    <h3>体育II（排球）</h3>
    <p>重要程度：★★</p>
    <p>学分：2</p>
    <p>熟练时间：30小时+</p>
    <p>AI可替代程度：★</p>
    <button class="course-detail-btn">查看详情</button>
  </div>
</div>


    <!-- 课程详情模态框 -->
    <div class="course-modal" id="courseModal">
      <div class="modal-content">
        <span class="close-btn">&times;</span>
        <h2 class="modal-title"></h2>
        <p class="modal-intro"></p>
        <div class="modal-resources">
          <h3>相关资源</h3>
          <p><a href="" class="mindmap-link" target="_blank">思维导图下载</a></p>
          <p>相关课程：<span class="related-courses"></span></p>
          <p>相关书籍：<span class="related-books"></span></p>
          <p>相关视频：<span class="related-videos"></span></p>
        </div>
      </div>
    </div>

    <!-- 底部联系方式 -->
    <div class="contact">
      <h3>联系方式</h3>
      <p>邮箱：example@xxx.com</p>
      <p>电话：123456789</p>
    </div>
  </div>
  <div class="custom-btn-group">
    <button class="custom-btn" id="customBtn">自定义</button>
    <button class="edit-btn" id="cancelCustomBtn" >取消</button>
    <button class="edit-btn" id="addCourseBtn">添加课程</button>
    <button class="edit-btn" id="bgColorBtn">背景颜色</button>
    <button class="edit-btn" id="restoreDefaultBtn">恢复默认</button>
    <button class="edit-btn" id="batchDeleteBtn">批量删除</button>
    <button class="edit-btn" id="saveResultBtn">保存结果</button>
  </div>
  <!-- 编辑课程的模态框 -->
<div class="edit-modal" id="editModal">
  <div class="modal-content">
    <span class="modal-close">×</span>
    <form id="editForm">
      <div class="form-group">
        <label for="editName">名称：</label>
        <input type="text" id="editName">
      </div>
      <div class="form-group">
        <label for="editImportance">重要程度：</label>
        <select id="editImportance">
          <option value="1">★</option>
          <option value="2">★★</option>
          <option value="3">★★★</option>
          <option value="4">★★★★</option>
          <option value="5">★★★★★</option>
        </select>
      </div>
      <div class="form-group">
        <label for="editCredit">学分：</label>
        <input type="number" id="editCredit" min="1" max="10">
      </div>
      <div class="form-group">
        <label for="editProficiency">熟练时间：</label>
        <input type="number" id="editProficiency" min="0">
      </div>
      <div class="form-group">
        <label for="editAi">AI可替代程度：</label>
        <select id="editAi">
          <option value="1">★</option>
          <option value="2">★★</option>
          <option value="3">★★★</option>
          <option value="4">★★★★</option>
          <option value="5">★★★★★</option>
        </select>
      </div>
      <div class="form-group">
        <label for="editStage">阶段：</label>
        <select id="editStage"></select>
      </div>
      <div class="form-group">
        <label for="editType">选修/必修：</label>
        <select id="editType"></select>
      </div>
      <div class="form-group">
        <label for="editCourseType">课程类型：</label>
        <select id="editCourseType"></select>
      </div>
      <div class="form-group">
        <label for="editCommonCategory">常说分类：</label>
        <select id="editCommonCategory"></select>
      </div>
      <div class="form-group">
        <label for="editIntro">简介：</label>
        <textarea id="editIntro" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label for="editRelatedCourses">相关课程：</label>
        <input type="text" id="editRelatedCourses" placeholder="逗号分隔">
      </div>
      <div class="form-group">
        <label for="editRelatedBooks">相关书籍：</label>
        <input type="text" id="editRelatedBooks" placeholder="逗号分隔">
      </div>
      <div class="form-group">
        <label for="editMindmap">思维导图上传：</label>
        <input type="file" id="editMindmap">
      </div>
      <div class="form-group">
        <label for="editRelatedVideos">相关视频网址：</label>
        <input type="text" id="editRelatedVideos" placeholder="逗号分隔">
      </div>
      <div class="modal-buttons">
        <button type="button" class="modal-close-btn">取消</button>
        <button type="submit">保存结果</button>
      </div>
    </form>
  </div>
</div>
<!-- 添加课程模态框 -->
<div class="add-course-modal" id="addCourseModal">
  <div class="modal-content">
    <span class="modal-close">×</span>
    <form id="addCourseForm">
      <div class="form-group">
        <label for="addName">课程名称：</label>
        <input type="text" id="addName" required>
      </div>
      <div class="form-group">
        <label for="addImportance">重要程度：</label>
        <select id="addImportance">
          <option value="1">★</option>
          <option value="2">★★</option>
          <option value="3">★★★</option>
          <option value="4">★★★★</option>
          <option value="5">★★★★★</option>
        </select>
      </div>
      <div class="form-group">
        <label for="addCredit">学分：</label>
        <input type="number" id="addCredit" min="1" max="10">
      </div>
      <div class="form-group">
        <label for="addProficiency">熟练时间：</label>
        <input type="number" id="addProficiency" min="0">
      </div>
      <div class="form-group">
        <label for="addAi">AI可替代程度：</label>
        <select id="addAi">
          <option value="1">★</option>
          <option value="2">★★</option>
          <option value="3">★★★</option>
          <option value="4">★★★★</option>
          <option value="5">★★★★★</option>
        </select>
      </div>
      <div class="form-group">
        <label for="addStage">阶段：</label>
        <select id="addStage">
          <option value="all">全部</option>
          <option value="大一上">大一上</option>
          <option value="大一下">大一下</option>
          <option value="大二上">大二上</option>
          <option value="大二下">大二下</option>
          <option value="大三上">大三上</option>
          <option value="大三下">大三下</option>
          <option value="大四上">大四上</option>
          <option value="大四下">大四下</option>
          <option value="额外内容">额外内容</option>
        </select>
      </div>
      <div class="form-group">
        <label for="addType">选修/必修：</label>
        <select id="addType">
          <option value="all">全部</option>
          <option value="选修课">选修课</option>
          <option value="必修课">必修课</option>
          <option value="额外">额外</option>
        </select>
      </div>
      <div class="form-group">
        <label for="addCourseType">课程类型：</label>
        <select id="addCourseType">
          <option value="all">全部</option>
          <option value="通识选修课">通识选修课</option>
          <option value="基础教育课">基础教育课</option>
          <option value="专业教育课">专业教育课</option>
          <option value="额外">额外</option>
        </select>
      </div>
      <div class="form-group">
        <label for="addCommonCategory">常说分类：</label>
        <select id="addCommonCategory">
          <option value="all">全部</option>
          <option value="思政类">思政类</option>
          <option value="基础理科">基础理科</option>
          <option value="专业课">专业课</option>
          <option value="编程课">编程课</option>
        </select>
      </div>
      <div class="form-group">
        <label for="addIntro">简介：</label>
        <textarea id="addIntro" rows="3"></textarea>
      </div>
      <div class="form-group">
        <label for="addRelatedCourses">相关课程：</label>
        <input type="text" id="addRelatedCourses" placeholder="逗号分隔">
      </div>
      <div class="form-group">
        <label for="addRelatedBooks">相关书籍：</label>
        <input type="text" id="addRelatedBooks" placeholder="逗号分隔">
      </div>
      <div class="form-group">
        <label for="addMindmap">思维导图上传：</label>
        <input type="file" id="addMindmap" accept="image/*">
      </div>
      <div class="form-group">
        <label for="addRelatedVideos">相关视频网址：</label>
        <input type="text" id="addRelatedVideos" placeholder="逗号分隔">
      </div>
      <div class="modal-buttons">
        <button type="button" class="modal-close-btn">取消</button>
        <button type="submit">确认添加</button>
      </div>
    </form>
  </div>
</div>

<!-- 样式设置模态框 -->
<div class="style-setting-modal" id="styleSettingModal">
  <div class="modal-content">
    <span class="modal-close">×</span>
    <h3>样式设置</h3>
    
    <!-- 背景设置组 -->
    <div class="form-group">
      <label>背景设置：</label>
      <div class="bg-settings">
        <label for="bgColor">背景颜色：</label>
        <input type="color" id="bgColor"><br>
        <label for="bgImage">背景图片上传：</label>
        <input type="file" id="bgImage" accept="image/*"><br>
        <label for="bgPosition">背景定位：</label>
        <select id="bgPosition">
          <option value="center">居中</option>
          <option value="top">顶部</option>
          <option value="bottom">底部</option>
          <option value="left">左侧</option>
          <option value="right">右侧</option>
        </select>
      </div>
    </div>

    <!-- 课程卡片设置组 -->
    <div class="form-group">
      <label>课程卡片设置：</label>
      <div class="card-settings">
        <label for="cardCourseSelect">选择课程：</label>
        <select id="cardCourseSelect" multiple size="5"><br>
        <label for="cardBorderColor">卡片边框颜色：</label>
        <input type="color" id="cardBorderColor"><br>
        <label for="cardTextColor">字体颜色：</label>
        <input type="color" id="cardTextColor"><br>
        <label for="cardImage">卡片图片上传：</label>
        <input type="file" id="cardImage" accept="image/*"><br>
        <label for="cardImagePosition">图片定位：</label>
        <select id="cardImagePosition">
          <option value="center">居中</option>
          <option value="top">顶部</option>
          <option value="bottom">底部</option>
        </select>
      </div>
    </div>

    <div class="modal-buttons">
      <button type="button" class="modal-close-btn">取消</button>
      <button type="button" id="saveStyle">保存结果</button>
    </div>
  </div>
</div>
<!-- 恢复默认模态框 -->
<div class="restore-modal" id="restoreModal">
  <div class="modal-content">
    <span class="modal-close">×</span>
    <h3>恢复默认设置</h3>
    <div class="form-group">
      <label>选项：</label>
      <div>
        <label><input type="radio" name="restoreOption" value="default" checked> 默认（初始状态）</label><br>
        <label><input type="radio" name="restoreOption" value="lastSaved" disabled> 上次修改后（暂未支持）</label>
      </div>
    </div>
    <div class="form-group">
      <label>恢复部分：</label>
      <div>
        <label><input type="checkbox" id="restoreAll" checked><span>全部</span> </label><br>
        <label><input type="checkbox" id="restoreCourseContent"> <span>具体的课程内容</span></label><br>
        <label><input type="checkbox" id="restoreCardTextColor"> <span>课程卡片字体颜色</span></label><br>
        <label><input type="checkbox" id="restoreCardBorderColor"> <span>卡片框颜色</span></label><br>
        <label><input type="checkbox" id="restoreBackground"> <span>背景</span></label>
      </div>
    </div>
    <div class="modal-buttons">
      <button type="button" class="modal-close-btn">取消</button>
      <button type="button" id="confirmRestore">确定</button>
    </div>
  </div>
</div>

<!-- 批量删除模态框 -->
<div class="batch-delete-modal" id="batchDeleteModal">
  <div class="modal-content">
    <span class="modal-close">×</span>
    <h3>批量删除课程</h3>
    <!-- 复用筛选栏 -->
    <div class="course-filter">
      <!-- 阶段筛选 -->
      <div class="filter-group">
        <label>阶段：</label>
        <select id="batchStageFilter">
          <option value="all">全部</option>
          <option value="大一上">大一上</option>
          <option value="大一下">大一下</option>
          <option value="大二上">大二上</option>
          <option value="大二下">大二下</option>
          <option value="大三上">大三上</option>
          <option value="大三下">大三下</option>
          <option value="大四上">大四上</option>
          <option value="大四下">大四下</option>
          <option value="额外内容">额外内容</option>
        </select>
      </div>

      <!-- 选修/必修筛选 -->
      <div class="filter-group">
        <label>选修/必修：</label>
        <select id="batchTypeFilter">
          <option value="all">全部</option>
          <option value="选修课">选修课</option>
          <option value="必修课">必修课</option>
          <option value="额外">额外</option>
        </select>
      </div>

      <!-- 课程类型筛选 -->
      <div class="filter-group">
        <label>课程类型：</label>
        <select id="batchCourseTypeFilter">
          <option value="all">全部</option>
          <option value="通识选修课">通识选修课</option>
          <option value="基础教育课">基础教育课</option>
          <option value="专业教育课">专业教育课</option>
          <option value="额外">额外</option>
        </select>
      </div>

      <!-- 常说分类筛选 -->
      <div class="filter-group">
        <label>常说分类：</label>
        <select id="batchCommonCategoryFilter">
          <option value="all">全部</option>
          <option value="思政类">思政类</option>
          <option value="基础理科">基础理科</option>
          <option value="专业课">专业课</option>
          <option value="编程课">编程课</option>
        </select>
      </div>
    </div>
    <div class="selection-controls">
      <button type="button" id="deselectAll">取消选择</button>
      <button type="button" id="selectAll">全选</button>
    </div>
    <div class="course-selection">
      <div id="customCourseSelection" class="custom-multi-select">
        <!-- 课程由 JS 动态填充为 <div class="course-item"> -->
      </div>
    </div>
    <div class="modal-buttons">
      <button type="button" id="deleteSelected">删除所选（预览）</button>
      <button type="button" class="modal-close-btn">取消</button>
      <button type="button" id="confirmBatchDelete">保存结果</button>
    </div>
  </div>
</div>
  <script src="../javascript/course.js"></script>
</body>
</html>